<template>
  <hm-layout>
    <view class="page-body">
      <view class="header">
       
        <view class="header-item">
          <el-input class="search-input input-border-radius-4004" size="small" type="text" clearable
            placeholder="请输入名称搜索..." v-model="queryForm1.formData.display_name" @keyup.enter.native="getList"
            @clear="getList" />
          <el-button type="primary" :loading="loading.main" :round="false" size="small" @click.stop="getList"
            style="border-radius: 0 4px 4px 0;">查询</el-button>
            <view  style="margin-left: 10px;">
              <el-button type="primary"  @click="uploadFile"> 上传 </el-button>
            </view>
            
        </view>
      </view>
      <view class="nav" v-loading="loading.nav">
        <view class="nav-list" v-for="(item, index) of data.navList" :key="index"
          :class="queryForm1.formData.category_id == item._id ? 'selected-nav' : ''"
          @click.stop="queryByCategory(item._id)">
          <text class="nav-name text-one">{{ item.name }}</text>
          <view class="nav-btn">
            <updateCategory v-if="index > 1" :data="item" @success="getNavList" />
            <el-popconfirm v-if="index > 1" title="确定删除该分组吗？（组内图片不会删除）" @confirm="deleteCategory(item._id, index)">
              <template #reference>
                <Delete @click.stop="stop" style="width: 1em; height: 1em;" />
              </template>
            </el-popconfirm>
            <el-button v-if="index > 1" class="live" type="text" @click.stop="goLiveTool(item)">开播</el-button>
          </view>
        </view>

        <addCategory class="add-group" @success="getNavList">添加分组</addCategory>
      </view>
      <view class="main" v-loading="loading.main">
        <!-- 内容详情 -->
        <view class="content-item" :class="[selectedIds.includes(item._id) ? 'choose-image' : '']"
          v-for="(item, index) in data.content.rows" :key="index" @click.stop="clickFile(item)">
          <view class="item-file">
            <image :src="item.url" mode="aspectFit" v-if="item.type === 'image'"></image>
            <view class="vk-contents" v-else-if="item.type === 'video'">
              <image :src="item | coverImageFilter" mode="aspectFit"></image>
              <view class="duration">{{ item.duration | durationFilter }}</view>
              <view class="size">{{ item.size | sizeFilter(["B","KB","MB","GB"],1024,1,"MB") }}</view>
              <vk-data-icon :name="item.play ?'el-icon-video-pause':'el-icon-video-play'" size="40" color="#d9d9d9"
                class="video-play-btn" @click="preview(item)"></vk-data-icon>
            </view>

            <view :src="item.url" class="other-icon" v-else>
              <vk-data-icon name="el-icon-document" size="80" color="#d5d5de"></vk-data-icon>
              <view class="size">{{ item.size | sizeFilter(["B","KB","MB","GB"],1024,1) }}</view>
              <view class="suffix">{{ item.original_name | suffixFilter }}</view>
            </view>
          </view>
          <view class="tips">
            <text class="title">{{ item.display_name }}</text>
            <!-- <text class="operation" v-if="item.type === 'video'" @click="vk.pubfn.openForm('updateVideo', { item })">编辑</text>
					<text class="operation" v-else @click="vk.pubfn.openForm('updateFileName', { item })">改名</text> -->
            <el-tooltip class="operation" placement="bottom">
              <text>链接</text>
              <template #content>
                <view style="text-align: center;">
                  <el-button type="text" @click="copyFileUrl(item.url)" style="margin-left: 0px;"> 复制 </el-button>
                  <!--    	<el-button type="text" @click="preview(item)" style="margin-left: 30px;"> 预览 </el-button> -->
                </view>
                <view>{{ item.url }}</view>
              </template>
            </el-tooltip>
            <el-popconfirm title="确定删除吗" @confirm="deleteFile(item._id)">
              <template #reference>
                <text slot="reference" @click.stop="stop">删除</text>
              </template>
            </el-popconfirm>
          </view>
        </view>
        <!-- 上传的按钮 -->
        <view class="update-img" @click.stop="uploadFile"></view>
      </view>
      <view class="footer" :class="selectedIds.length ? '' : 'no-selected'">
        <label :style="data.content.rows.length ? '' : 'pointer-events: none;'" class="footer-label"
          @click.stop="selectAll">
          <checkbox style="transform: scale(0.6);" class="checkbox" :checked="selectedIds.length ? true : false" />
          <text>已选</text>
          <text class="num">{{ selectedIds.length }} / {{ data.content.rows.length }}</text>
          <text>项</text>
        </label>
        <!-- 	<text class="footer-item" @click.stop=" vk.pubfn.openForm('updateFileCategory', { item: { _id: selectedIds }, list: data.navList }) " >
				保存到组
			</text> -->
        <el-popconfirm class="footer-item" title="确定删除吗？" @confirm="deleteFile(selectedIds)">
          <template #reference>
            <text>删除</text>
          </template>
        </el-popconfirm>
        <!-- 底部分页内容 -->
        <el-pagination class="paging" background :total="data.content.total" :current-page="queryForm1.pageIndex"
          :page-size="queryForm1.pageSize" :page-sizes="[30, 50, 100]" :pager-count="5"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change=" val => { queryForm1.pageSize = val; getList(); } "
          @current-change=" val => { queryForm1.pageIndex = val; getList(); } "></el-pagination>
      </view>
      <!-- 页面内容结束 -->


    </view>
  </hm-layout>
</template>

<script>
  var that; // 当前页面对象
  var vk = uni.vk; // vk实例

  import addCategory from "./form/addCategory";
  import updateCategory from "./form/updateCategory";
  import updateFileCategory from "./form/updateFileCategory";
  import updateFileName from "./form/updateFileName";
  import updateVideo from "./form/updateVideo";
  import preview from "./form/preview";
  import uploadProgress from "./form/uploadProgress";

  export default {
    components: {
      addCategory,
      updateCategory,
      updateFileCategory,
      updateFileName,
      updateVideo,
      preview,
      uploadProgress
    },
    data() {
      // 页面数据变量
      return {
        // 选中的
        selectedIds: [],
        // 页面是否请求中或加载中
        loading: {
          nav: false,
          main: false
        },
        // init请求返回的数据
        data: {
          // 分组列表
          navList: [],
          // 文件数据
          content: {
            rows: [],
            total: 0
          }
        },
        // 查询表单
        queryForm1: {
          pageIndex: 1,
          pageSize: 30,
          formData: {
            display_name: "",
            category_id: "",
            type: "image"
          },
          columns: [{
              key: "display_name",
              title: "名称",
              type: "text",
              mode: "%%"
            },
            {
              key: "url",
              title: "URL",
              type: "text",
              mode: "="
            },
            {
              key: "category_id",
              title: "分类id",
              type: "text",
              mode: "="
            },
            {
              key: "type",
              title: "文件类型",
              type: "text",
              mode: "="
            }
          ]
        },
        formDatas: {}
        // 表单相关开始 -----------------------------------------------------------
      };
    },
    // 监听 - 页面每次【加载时】执行(如：前进)
    onLoad(options = {}) {
      that = this;
      vk = that.vk;
      that.options = options;
      that.init(options);
    },
    // 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
    onReady() {},
    // 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
    onShow() {},
    // 监听 - 页面每次【隐藏时】执行(如：返回)
    onHide() {},
    // 函数
    methods: {
      // 页面数据初始化函数
      init(options) {
        that.getNavList();
        that.getList();
      },
      goLiveTool(data) {
        console.log(data)
				vk.navigateTo({
					url: '/pages/live-tool/live-tool',
					success: (res) => {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('data', data);
					}
				})
      },
      // 获取文件列表
      getList() {
        let {
          queryForm1,
          selectedIds
        } = that;
        vk.callFunction({
          url: "client/uni-id-files/files/kh/getList",
          loading: {
            that,
            name: "loading.main"
          },
          data: queryForm1,
          success: function(data) {
            that.data.content = data;
            selectedIds.length = 0;
          }
        });
      },
      // 获取分类列表
      getNavList() {
        vk.callFunction({
          url: "client/uni-id-files/categories/kh/getList",
          loading: {
            that,
            name: "loading.nav"
          },
          data: {
            pageIndex: 1,
            pageSize: 100
          },
          success: function(data) {
            that.data.navList = [{
                _id: "",
                name: "全部"
              },
              {
                _id: "null",
                name: "未分组"
              },
              ...data.rows
            ];
          }
        });
      },
      // 查询指定分类下的文件列表
      queryByCategory(category_id) {
        if (that.queryForm1.formData.category_id != category_id) {
          that.queryForm1.formData.category_id = category_id;
          that.getList();
        }
      },
      // 删除分组
      deleteCategory(_id, index) {
        vk.callFunction({
          url: "client/uni-id-files/categories/kh/delete",
          loading: {
            that,
            name: "loading.nav"
          },
          data: {
            _id
          },
          success: function(data) {
            that.data.navList.splice(index, 1);
          }
        });
      },
      // 删除
      deleteFile(ids) {
        vk.callFunction({
          url: "client/uni-id-files/files/kh/delete",
          title: "请求中...",
          data: {
            _id: ids
          },
          success: function(data) {
            if (data.num > 0) {
              if (typeof ids !== "object") ids = [ids];
              ids.map(id => {
                let index = vk.pubfn.getListIndex(that.data.content.rows, "_id", id);
                if (index > -1) {
                  that.data.content.rows.splice(index, 1);
                }
              });
              that.selectedIds = [];
            }
          }
        });
      },
      uploadFile() {
        let type = that.queryForm1.formData.type;
        let fileType;
        let extension = [];
        if (type === "image") {
          extension = ["png", "jpg", "jpeg", "gif", "bmp", "svg", "webp", "jfif", "dpg"];
          fileType = "image";
        } else if (type === "video") {
          extension = ["avi", "mp3", "mp4", "3gp", "mov", "rmvb", "rm", "flv", "mkv", "wmv", "m3u8", "mpg", "mpeg",
            "dat", "asf"
          ];
          fileType = "video";
        } else if (type === "other") {
          extension = ["txt", "pdf", "xls", "xlsx", "ppt", "pptx", "doc", "docx", "rar", "zip"];
        }
        uni.chooseFile({
          count: 500,
          extension,
          success: async res => {
            let item = {
              tempFilePaths: res.tempFilePaths,
              tempFiles: res.tempFiles,
              categoryId: that.queryForm1.formData.category_id,
              fileType,
            };
            // vk.pubfn.openForm('uploadProgress', { item });
            vk.showLoading("上传中...");
            for (let i = 0; i < res.tempFilePaths.length; i++) {
              let percentage = vk.pubfn.toDecimal((i + 1) / res.tempFilePaths.length * 100, 0);
              try {
                await vk.uploadFile({
                  filePath: res.tempFilePaths[i],
                  file: res.tempFiles[i],
                  needSave: true,
                  fileType,
                  category_id: that.queryForm1.formData.category_id,
                  onUploadProgress: function(progressRes) {
                    // 上传过程中
                    vk.showLoading(`文件${i+1}：${progressRes.progress}%\n`);
                  },
                });
                vk.showLoading(`总上传进度：${percentage}%`);
              } catch (err) {
                console.error(err);
              }
            }
            vk.hideLoading();
            that.getList();
          }
        });
      },
      // 复制文件的URL
      copyFileUrl(data) {
        uni.setClipboardData({
          data,
          success: res => {
            that.$message({
              message: "URL已复制",
              type: "success"
            });
          }
        });
      },
      // 预览
      preview(item) {
        let {
          type,
          url
        } = item;
        if (type === "image") {
          vk.pubfn.openForm('preview', {
            item
          })
        } else if (type === "video") {
          vk.pubfn.openForm('preview', {
            item
          })
        } else {
          vk.toast("暂不支持该类型文件的预览");
        }
      },
      // 点击了文件
      clickFile(item) {
        let index = that.selectedIds.indexOf(item._id);
        if (index > -1) {
          that.selectedIds.splice(index, 1);
        } else {
          that.selectedIds.push(item._id);
        }
      },
      // 全选
      selectAll() {
        if (that.selectedIds.length && that.data.content.rows.length == that.selectedIds.length) {
          that.selectedIds = [];
        } else {
          that.data.content.rows.forEach((value, index, arr) => {
            if (!that.selectedIds.includes(value._id)) {
              that.selectedIds.push(value._id);
            }
          });
        }
      },
      stop() {}
    },
    watch: {},
    // 过滤器
    filters: {
      suffixFilter(name = "") {
        let arr = name.split(".");
        return arr[arr.length - 1];
      },
      coverImageFilter(item) {
        let src = "";
        let {
          cover_image,
          url,
          width = 600,
          height = 600
        } = item;
        if (cover_image) {
          src = cover_image;
        } else {
          src = `${url}?x-oss-process=video/snapshot,t_1000,f_jpg,w_${width},h_${height},m_fast`;
        }
        console.log('src: ', src)
        return src;
      },
      durationFilter(value) {
        let result = parseInt(value);
        let h = Math.floor(result / 3600) < 10 ? '0' + Math.floor(result / 3600) : Math.floor(result / 3600);
        let m = Math.floor((result / 60 % 60)) < 10 ? '0' + Math.floor((result / 60 % 60)) : Math.floor((result / 60 %
          60));
        let s = Math.floor((result % 60)) < 10 ? '0' + Math.floor((result % 60)) : Math.floor((result % 60));
        return `${h}:${m}:${s}`;
      }
    },
    // 计算属性
    computed: {}
  };
</script>
<style lang="scss" scoped>
  page,
  .page-body {
   
  }

  // 页面主体内容区域
  .page-body {
    width: 100%;
    height: 100%;
    margin-top: 10px;
    margin-left: 10px;
    display: grid;
    grid-template-columns: 250px auto;
    grid-template-rows: 35px auto 40px;
    grid-gap: 8px 0px;
    position: relative;
  }

  .header {
    display: flex;
    align-items: center;
    grid-column: 1 / -1;
    font-size: 14px;
    user-select: none;

    .el-button {
      height: 32px;
    }
  }

  // 搜索
  .header-item {
    
    height: 100%;
    display: flex;
    border-radius: 4px;
    overflow: hidden;

    .search-input {
      width: 200px;

    }

    .el-button {
      height: 32px;
    }
  }


  .nav {
    height: 100%;
    grid-row: 2 / -1;
    border: 1px solid #e4e2e2;
    display: grid;
    grid-template-rows: repeat(auto-fill, 40px);
    color: #59607b;
    font-size: 12px;
    overflow-y: auto;
    box-sizing: border-box;
    padding-bottom: 10px;
  }

  .nav-list {
    cursor: pointer;
    border-bottom: 1px solid #e4e2e2;
    box-sizing: border-box;
    height: 40px;
    overflow: hidden;
    transition: all 0.3s;
    background-color: #f6f4f4;
    padding-left: 10px;
    display: flex;
    align-items: center;

    >i {
      font-size: 13px;
      place-self: center;
    }

    &:hover {
      color: #108ee9;
    }

    .nav-name {
      flex: 1;
    }

    .nav-btn {
      width: 90px;
      display: flex;
      align-items: center;

      .btn {
        width: 22px;
        display: block;
      }

      .live {
        font-size: 12px;
        margin-left: 8px;
        margin-top: 3px;
      }
    }
  }

  // 选中的分栏
  .selected-nav {
    background-color: #ecf6fd !important;
    color: #108ee9 !important;
  }

  // 添加分组的按钮
  .add-group {
    width: 60%;
    margin: 5px auto;
    padding: 5px 0px;
    text-align: center;
    border: 1px dashed #108ee9;
    color: #108ee9;
    cursor: pointer;
  }

  .add-group:hover {
    background-color: #108ee9;
    color: #ffffff;
    opacity: 0.9;
  }

  .add-group:active {
    background-color: #108ee9;
    color: #ffffff;
  }

  // 内容详情
  .main {
    display: grid;
    grid-template-columns: repeat(auto-fill, 135px);
    grid-template-rows: repeat(auto-fill, 180px);
    grid-gap: 20px;
    place-content: start center;
    overflow-y: auto;
    height: calc(100vh - 200px);
    min-width: 700px;
  }

  .update-img,
  .content-item {
    width: 135px;
    height: 180px;
    border: 1px solid #e4e2e2;
    cursor: pointer;
    background-color: transparent;
    transition: all 0.25s;
    position: relative;
    overflow: hidden;
  }

  // 被选中的
  .choose-image {
    background-color: #ecf6fd !important;
    border: 1px solid #daedff;

    .tips {
      background-color: #ecf6fd;
    }
  }

  .content-item:hover {
    background-color: #ecf6fd;
    border: 1px solid #daedff;
  }

  .item-file {
    width: 100%;
    height: 150px;
    position: relative;

    image {
      width: 100%;
      height: 100%;
    }

    .suffix {
      position: absolute;
      top: 2px;
      right: 6px;
      font-size: 12px;
      color: #a7a7a7;
    }

    .duration {
      position: absolute;
      bottom: 0px;
      left: 0px;
      font-size: 12px;
      color: #FFFFFF;
      background-color: #b2b2b2;
      padding: 0px 2px;
    }

    .size {
      position: absolute;
      bottom: 0px;
      right: 0px;
      font-size: 12px;
      color: #FFFFFF;
      background-color: #b2b2b2;
      padding: 0px 2px;
    }

    .video-play-btn {
      position: absolute;
      top: 54px;
      left: 47px;
      background-color: rgba(66, 66, 66, 0.6);
      border-radius: 50%;
    }

    .other-icon {
      display: flex;
      width: 100%;
      height: 100%;
      justify-content: center;
      align-items: center;
    }
  }

  .content-item:hover>.tips {
    transform: translateY(0%) !important;
  }

  // 上传按钮
  .update-img {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #d5d5de;

    &::before {
      line-height: 1;
      font-size: 45px;
      content: "+";
    }

    &::after {
      content: "上传";
      font-size: 12px;
    }
  }

  .tips {
    position: absolute;
    height: 60px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background-color: #fff;
    transition: all 0.4s;
    transform: translateY(50%);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-gap: 5px 0px;
    font-size: 13px;
    place-items: center;
  }

  .title {
    text-align: center;
    grid-column: 1 / -1;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .operation {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    &:hover {
      color: #108ee9;
    }
  }

  // 保存到组、删除、下载链接
  .footer {
    background-color: #f4faff;
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #3091f2;
  }

  .paging {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .footer-item {
    padding: 2px 9px;
    border: 1px solid #3091f2;
    margin-left: 16px;
    cursor: pointer;
    background-color: #ffffff;
  }

  .no-selected {
    .footer-item {
      pointer-events: none;
      color: #ced0d5;
      background-color: #fff;
      border-color: #ebeef5 !important;
    }
  }

  .footer-label {
    display: flex;
    align-items: center;
    user-select: none;
    color: #59607b;

    .checkbox {
      margin: 0;
      padding: 0;
      outline: none;
    }
  }

  .num {
    min-width: 50px;
    text-align: center;
    margin: 0 10px;
    color: #3091f2;
  }

  ::v-deep .input-border-radius-4004 .el-input__inner {
    border-radius: 4px 0px 0px 4px;
  }
</style>